<!--
 * @description 资金审核
 * @author dumeng
 * @date 2021/9/17
 -->
<template>
  <div class="xqxz-funds-check-page">
    <section class="check-main">
      <el-card class="main-card">
        <section slot="header" class="clearfix">
          <span>小组信息</span>
          <el-button style="float: right; padding: 8px 20px" type="primary" @click="handleExport('group')">导出小组成员</el-button>
        </section>
        <!-- 小组信息 -->
        <section class="card-info">
          <section class="info-item">
            <div class="item-label">小组名称：</div>
            <div class="item-content">
              {{ obj.groupName||'' }}
            </div>
          </section>
          <section class="info-item">
            <div class="item-label">小组分类：</div>
            <div class="item-content">
              {{ obj.interestGroup.classifyName || '' }}
            </div>
          </section>
          <section class="info-item">
            <div class="item-label">小组logo：</div>
            <div class="item-content logo">
              <el-image
                class="cover-image"
                :src="view + obj.interestGroup.groupLogo"
                :preview-src-list="[view + obj.interestGroup.groupLogo]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </div>
          </section>
          <section class="info-item">
            <div class="item-label">小组简介：</div>
            <div class="item-content desc-wrap">{{ obj.interestGroup.groupSummary||'' }}</div>
          </section>
        </section>
      </el-card>
      <el-card v-if="obj.interestGroupActivity" class="main-card" style="margin-top: 10px;">
        <section slot="header" class="clearfix">
          <span>活动信息</span>
          <el-button style="float: right; padding: 8px 20px" type="primary" @click="handleExport('act')">导出参与人员</el-button>
        </section>
        <section class="card-info">
          <!--活动信息-->
          <section class="info-item">
            <div class="item-label">活动名称：</div>
            <div class="item-content">{{ obj.interestGroupActivity.activityName||'' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">活动内容：</div>
            <div class="item-content desc-wrap">{{ obj.interestGroupActivity.activityContent|| '' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">活动时间：</div>
            <div class="item-content">{{ obj.interestGroupActivity.activityStartTime+'至'+obj.interestGroupActivity.activityEndTime|| '' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">活动地点：</div>
            <div class="item-content">{{ obj.interestGroupActivity.activityAddress|| '' }}</div>
          </section>
          <!--          <section class="info-item">-->
          <!--            <div class="item-label">报名人数：</div>-->
          <!--            <div class="item-content">{{ obj.interestGroupActivity.registrationNum|| '' }}</div>-->
          <!--          </section>-->
          <!--          <section class="info-item">-->
          <!--            <div class="item-label">签到人数：</div>-->
          <!--            <div class="item-content">{{ obj.interestGroupActivity.signNum|| '' }}</div>-->
          <!--          </section>-->
          <section class="info-item">
            <div class="item-label">经费申请说明：</div>
            <div class="item-content">{{ obj.commitContent|| '' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">申请金额：</div>
            <div class="item-content">{{ obj.param2|| '' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">附件：</div>
            <div class="item-content">
              <el-image v-for="(image, i) in obj.param5? obj.param5.split(',') : []" :key="i" :src="view + image" :preview-src-list="previewSrcList(obj.param5.split(','))">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
                <div slot="placeholder" class="image-slot">
                  <i class="el-icon-loading" />
                </div>
              </el-image>
            </div>
          </section>
        </section>
      </el-card>
      <el-card class="main-card" style="margin-top: 10px;">
        <section slot="header" class="clearfix">
          <span>审核</span>
        </section>
        <el-form :model="form" :rules="rules" label-position="right" label-width="110px">
          <el-form-item v-if="type==='view'" label="提交人">
            {{ obj.commitName||'' }}
          </el-form-item>
          <el-form-item v-if="type==='view'" label="提交人手机号">
            {{ handleDecrypt(obj.commitPhone) ||'' }}
          </el-form-item>
          <el-form-item v-if="type==='view'" label="提交人部门">
            {{ obj.commitDeptName||'' }}
          </el-form-item>
          <el-form-item v-if="type==='view'" label="审核人">
            {{ obj.auditUserName||'' }}
          </el-form-item>
          <el-form-item v-if="type==='view'" label="审核时间">
            {{ obj.auditTime||'' }}
          </el-form-item>
          <el-form-item label="审核状态" prop="auditResult">
            <el-radio-group v-model="form.auditResult" :disabled="type == 'view'">
              <el-radio v-for="(item, index) in dict.AUDITRESULT" :key="index" :label="item.dictValue">{{
                item.dictName
              }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if=" form.auditResult==='AUDITRESULT02'" label="审批金额" prop="auditAmount">
            <el-input v-model="form.auditAmount" :disabled="type == 'view'" placeholder="请输入审批金额" />
          </el-form-item>
          <el-form-item label="审核说明">
            <el-input
              v-model="form.auditExplain"
              :disabled="type == 'view'"
              :autosize="{ minRows: 4, maxRows: 6}"
              type="textarea"
              placeholder="请输入审核说明"
            />
          </el-form-item>
        </el-form>
      </el-card>
    </section>
    <div class="check-footer">
      <el-button style="padding: 8px 30px;" @click="handleCancel">取消</el-button>
      <el-button style="padding: 8px 30px;" type="primary" @click="handleSubmit('back')">
        {{ type === 'view' ? '确定' : '提交' }}
      </el-button>
      <el-button
        v-if="type !== 'view'"
        style="padding: 8px 30px;"
        type="primary"
        @click="handleSubmit('next')"
      >
        提交并审核下一条
      </el-button>
    </div>
  </div>
</template>

<script>
import { get, audit, NoMaskApi, MaskApi, exportUserNoMaskApi, exportUserMaskApi } from '../api/fundsManage'
import { exportSign } from '@/utils/fileImportOrExportSign'
import { mapGetters } from 'vuex'
import CryptoJS from '@/utils/aesJiaJM'
import { exportCheck } from '@/utils/sensitiveInfoExportCheck'
export default {
  name: 'XqxzFundsCheck',
  data() {
    return {
      i: '',
      t: '',
      tab: '',
      obj: {},
      form: {
        auditResult: '',
        auditExplain: '',
        auditAmount: ''
      },
      rules: {
        auditResult: [{ required: true, message: '请选择审核状态', trigger: 'blur' }],
        auditAmount: [{ required: true, message: '请输入审批金额', trigger: 'blur' }]
      },
      view: '/API-DOCUMENT/document/file/download?id=',
      dict: {
        AUDITRESULT: [
          {
            'dictValue': 'AUDITRESULT01',
            'dictName': '待审核'
          },
          {
            'dictValue': 'AUDITRESULT02',
            'dictName': '审核通过'
          },
          {
            'dictValue': 'AUDITRESULT03',
            'dictName': '审核不通过'
          }
        ] // 审核状态
      }
    }
  },
  computed: {
    ...mapGetters([
      'backUrl'
    ])
  },
  created() {
    if (this.$route.query.type) {
      this.type = this.$route.query.type
    }
    if (this.$route.query.tab) {
      this.tab = this.$route.query.tab
    }
    if (this.$route.query.i) {
      this.i = this.$route.query.i || ''
      if (this.$route.query.type) {
        this.type = this.$route.query.type
      }
      this.getData()
    } else {
      this.$message({
        showClose: true,
        message: '参数异常！',
        type: 'warning',
        onClose: () => {
          this.$router.back()
        }
      })
    }
  },
  methods: {
    /**
     * 解密
     */
    handleDecrypt(str) {
      return str ? CryptoJS.$aesJieM(str) : ''
    },
    filterText(oldVal, newVal) {
      if (oldVal === newVal) {
        return newVal
      } else {
        return `${oldVal}更改为<span style="color:red;">${newVal}</span>`
      }
    },
    /**
     * 附件预览
     */
    previewSrcList(arr) {
      return arr.map(item => { return this.view + item })
    },
    /**
     * 导出人员
     */
    handleExport(type) {
      this.exportUser(type)
    },
    /**
     * 导出人员
     * type   group 小组成员  act:活动参与人员
     */
    exportUser(type) {
      const query = {
        groupId: this.obj.groupId
      }
      if (type === 'act') {
        query['activityId'] = this.obj.interestGroupActivity.id
      }
      for (const i in query) {
        if (query[i] === '') {
          delete query[i]
        }
      }
      if (type === 'group') {
        exportCheck('STAFF_SERVICE_INTERESTGROUP', this.obj.groupId, exportUserMaskApi, exportUserNoMaskApi, exportSign(query).obj, '小组成员信息.xlsx')
      } else if (type === 'act') {
        exportCheck('STAFF_SERVICE_INTERESTGROUP', this.obj.interestGroupActivity.id, MaskApi, NoMaskApi, exportSign(query).obj, '参与人员信息.xlsx')
      }
    },
    getData(t) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get({ id: this.i }).then(res => {
          loading.close()
          try {
            this.obj = res.data.data
          } catch (err) {
          }
          this.form = {
            auditResult: res.data.data.auditStatus || 'AUDITRESULT01',
            auditExplain: res.data.data.auditRemark || '',
            auditAmount: res.data.data.auditAmount || ''
          }
          resolve()
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },

    handleCancel() {
      if (this.backUrl !== null) { // 如果是小组管理跳入的
        this.$router.push(this.backUrl)
      } else {
        this.$router.replace(`${this.$filterPath('fundsManage')}?tab=${this.tab}`)
      }
    },

    handleSubmit(type) {
      if (this.type === 'view') {
        this.handleCancel()
      } else {
        const loading = this.$loading({
          lock: true,
          text: '请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        return new Promise((resolve, reject) => {
          audit({
            id: this.i,
            auditStatus: this.form.auditResult,
            auditAmount: this.form.auditAmount,
            commitType: 'TYPE_JFSQ',
            auditRemark: this.form.auditExplain
          }).then(res => {
            loading.close()
            this.$message({
              title: '成功',
              message: '提交审核成功',
              type: 'success',
              duration: 1000,
              onClose: () => {
                if (type === 'back') {
                  this.$router.back()
                } else {
                  if (res.data.data) {
                    this.i = res.data.data
                    this.getData()
                  } else {
                    this.$message({
                      title: '',
                      message: '已全部审核完成',
                      type: 'success',
                      duration: 1000,
                      onClose: () => {
                        this.handleCancel()
                      }
                    })
                  }
                }
              }
            })
            resolve()
          }).catch(error => {
            loading.close()
            reject(error)
          })
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .xqxz-funds-check-page {
    min-height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
    overflow: hidden;

    .check-main {
      position: absolute;
      top: 10px;
      left: 0;
      right: 0;
      bottom: 52px;
      padding: 0 10px;
      box-sizing: border-box;
      overflow: hidden;

      &::-webkit-scrollbar {
        width: 8px; /*对垂直流动条有效*/
        height: 1px; /*对水平流动条有效*/
      }

      /** 滚动条轨道*/
      &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: white;
        border-radius: 3px;
      }

      /** 滚动条里面小方块*/
      &::-webkit-scrollbar-thumb {
        height: 32px;
        border-radius: 5px;
        box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
        background-color: #eaeaea;
      }

      &:hover {
        overflow: auto;
      }

      .card-info {
        .info-item {
          padding-bottom: 8px;
          vertical-align: top;
          display: flex;

          .item-label {
            color: rgba(0, 0, 0, 1);
            font-weight: 400;
            font-size: 14px;
            line-height: 1.5715;
            text-align: start;
          }

          .item-content {
            flex: 1 1;
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            line-height: 1.5715;
            word-break: break-word;
            overflow-wrap: break-word;

            .item-image {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
            }

            .el-image {
              width: 100px;
              height: 100px;
              //margin-right: 10px;
              //margin-bottom: 10px;

              .image-slot {
                background-color: #f5f7fa;
              }
            }
          }
        }
      }
    }

    .check-footer {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      padding: 10px 0;
      background-color: white;
      box-shadow: 0 -3px 6px #f5f5f5;
    }
  }
</style>
